import { ref, watch, defineProps } from 'vue'
import { pxList, switchList } from '@/constants'
export function useCompProps(props) {
  const style = ref();
  watch(props, (newValue) => {
    console.log(newValue)
    const o = {};
    Object.entries(newValue.style).map(([key, value]) => {
      if (pxList.some(v => key.toLocaleLowerCase().includes(v.toLocaleLowerCase()))) {
        o[key] = value + 'px'
      } else if (typeof value === 'object') {
        if (value)
          o[key] = value.value
      } else if (typeof value === 'boolean') {
        console.log(22222)
        const item = switchList.find(v => {
          console.log(v.name, key)
          return v.name === key
        })
        if (item) {
          o[key] = value ? item.value[1] : item.value[0]
          return;
        }
        o[key] = value
      } else {
        o[key] = value
      }
    })
    style.value = o
  }, { immediate: true, deep: true })
  return { style }
}